const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry: './src/main.js', // 定义入口文件
    output: {
        path: path.join(__dirname, '/dist'),  // 打包生成文件地址
        filename: '[name].bundle.js'  // 生成的文件名
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                },
                exclude: /node_modules/ // 不编译node_modules下的文件
            },
            {
                // *.vue
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // `*.vue` 文件中的 `<style>` 块以及普通的`*.css`
                test: /\.(css|less)$/,
                use: ['vue-style-loader', 'css-loader','less-loader']
            },
            {
                // 图片
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: {
                  loader: 'url-loader',
                  options: {
                    esModule: false, // 
                    limit: 10 * 1024 // 10kb
                  }
                }
            }
        ]
    },
    // 解析路径
    resolve: {
        // 设置src别名
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
        //后缀名 可以根据需要自由增减
        extensions: ['.js', '.vue']
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', // 生成的文件夹名
            template: 'public/index.html', // 模板html
            favicon: 'public/favicon.ico', // 图标
        }),
        new VueLoaderPlugin()
    ]
}

